<template>
	<view class="xlTabNav" :style="{top:navHeight + 'px'}">
		<view class="tabItem"
			:class="[tabIndex == index ? 'active' : '']"
			v-for="(item,index) in tabNav"
			:key="index"
		>{{item.name}}</view>
	</view>
</template>

<script>
	export default {
		props:{
			tabNav:Array,
			navHeight:Number,
			tabIndex:Number
		},
		data(){
			return{
			}
		}
	}
</script>

<style lang="scss" scoped>
	$hei:90rpx;
	.xlTabNav{
		height: $hei;
		display: flex;
		padding: 0 30rpx;
		background: $pss-sq-main-bg;
		position: sticky;
		left: 0;
		z-index: 100;
		.tabItem{
			width: 180rpx;
			font-size: 26rpx;
			color: #fff;
			opacity: .7;
			line-height: $hei;
			&.active{
				font-size: 30rpx;
				opacity: 1;
				font-weight: 600;
			}
		}
	}
</style>